<!--绿色制造（工厂、供应链、园区、绿色矿山）-->
<template>
    <Layout class="menu-left">
        <Menu mode="horizontal" @on-select='lowerStep' :active-name="modaleShow" v-if="this.isResult !== 'greenMine'">
            <MenuItem :name="1">{{titleName}}</MenuItem>
            <MenuItem :name="2">{{titleName}}计划</MenuItem>
			<MenuItem :name="3">{{titleName}}统计汇总</MenuItem>
        </Menu>
		
		<Form ref="form1" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
			<Row v-show="!switchFlag" class="query-form">
				<Col span="8">
					<FormItem label="单位名称：" prop="order">
						<cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName'
									  :orgTree="true"
									  :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
					</FormItem>
				</Col>
				<Col span="8">
					<FormItem label="计划时间：" prop="startTimeRange" v-if="this.isResult !== 'greenMine'">
						<DatePicker class="query-form-el" v-model="dataToQuery.startTimeRange" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择创建时间段"
									@on-change="(date) => onSelectFieldQueryDateRange(date, 'startTime')"	></DatePicker>
					</FormItem>
				</Col>
				<Col span="8" >
					<!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
					<Button @click="reset1" class="ivu-btn-reset">重置</Button>
					<Button v-if='modaleShow!=3' class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
					<Button v-else class="ivu-btn-query" icon="md-search" @click="queryStatis">查询</Button>
				</Col>
			</Row>
			<Row v-show="switchFlag" class="query-form">

				<Col span="8">
					<Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
					<Button @click="reset1" class="ivu-btn-reset">重置</Button>
					<Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
			</Row>
			<Row class="query-form" v-if='modaleShow!=3'>
				<Col span="24">
					<Button size="large" v-if="modaleShow==2 || this.isResult === 'greenMine'" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
					<download-button :api="exportUrl" :queryForm="dataToQuery" />
					<!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
				</Col>
			</Row>
		</Form>
		<div v-if='modaleShow!=3'>	
			<Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
				   :loading='pageStatus.loading'
				   border :columns="columns1" :data="dataTable">
			</Table>
			<Row style="margin-right:10px;">
				<Col span="24">
					<Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
						  @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
						  show-total show-sizer show-elevator/>
				</Col>
			</Row>
			<Modal :title="this.getModalTitle(titleName)" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"
               :width=800 :styles="{maxHeight:'700px'}" class-name='limit-height-dialog'>
				<Row>
					<Col span="24">
						<Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false"
							  :model="dataToView" :rules="mode === 'view'?{}:ruleCustom"
							  :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="23">
									<FormItem label='单位名称：' prop='companyId'>
										<div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
										<cascaderDom class="query-form-el" ref="companyQuery" :orgTree="true" v-else
													 :currentOrgId="dataToView.companyId" style="width: 100%"
													 :setCurrentName="{label:dataToView.companyName, value:dataToView.companyId}"
													 @setOrgInfo='(data)=>{ if (data && data instanceof Array && data.length > 0 ) {this.$set(this.dataToView, "companyId", data[data.length - 1])}}'
													 @setOrgname='(data)=>{ if(data){this.$set(this.dataToView, "companyName", data)}}'></cascaderDom>
									</FormItem>
								</Col>
							</Row>
							<Row v-if="isResult==='greenMine'" type="flex" justify="space-around" class="code-row-bg">
								<Col span="23">
									<FormItem label='矿山名称：' prop='mineName'>
										<div v-if="mode === 'view'">{{ dataToView.mineName }}</div>
										<Input v-else class='query-form-el' placeholder="请填写矿山名称" type='text'
											   v-model='dataToView.mineName'></Input>
									</FormItem>
								</Col>
							</Row>
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="11">
									<FormItem label='创建级别：' prop='createLevel'>
										<div v-if="mode === 'view'">{{ dataToView.createLevelName }}</div>
										<!--<Input v-else class='query-form-el' placeholder="请填写创建级别" type='text' v-model='dataToView.createLevel'></Input>-->
										<Select v-else v-model='dataToView.createLevel' @on-change="createLevelChange"
												placeholder="请填写创建级别" label-in-value class='query-form-el'>
											<Option v-for="item in dictMap.createLevels" :value="item.codingCodeId"
													:key="item.codingCodeId">{{item.codingName }}
											</Option>
											<!-- :disabled="isResult !== 'greenMine'&& ['未创建','行业协会'].includes(item.codingName)" -->
										</Select>
									</FormItem>
								</Col>
								<Col span="11" v-if="dataToView.createLevel ==='env-00007000000001'">
									<FormItem label='未创建原因：' prop='reasonNotCreated'>
										<div v-if="mode === 'view'">{{ dataToView.reasonNotCreatedName }}</div>
										<Select v-else v-model='dataToView.reasonNotCreated' placeholder="请填写未创建原因"
												label-in-value class='query-form-el'>
											<Option v-for="item in dictMap.reasonNotCreateds" :value="item.codingCodeId"
													:key="item.codingCodeId">{{item.codingName }}
											</Option>
										</Select>
									</FormItem>
								</Col>
								<Col span="11" v-else-if="this.isResult !== 'greenMine'">
									<FormItem label="当前创建状态：" prop="playImplementation" >
										<div v-if="mode === 'view'">{{dataToView.playImplementation}}</div>
										<Select v-else class='w' placeholder="请选择当前创建状态" v-model='dataToView.playImplementation'>
											<Option value="计划中">计划中</Option>
											<Option value="创建中">创建中</Option>
											<Option value="完成创建">完成创建</Option>
										</Select>
									</FormItem>
								</Col>
								<Col span="11"></Col>
							</Row>
							<Row type="flex" justify="space-around" class="code-row-bg" v-if="this.isResult !== 'greenMine'">
								<Col span="11" >
									<FormItem label="计划开始时间：" prop="startTime" >
										<div v-if="mode === 'view'">{{this.renderViewDate(dataToView.startTime)}}</div>
										<DatePicker v-else v-model="dataToView.startTime"
													:options="{disabledDate(date) {return date && dataToView.endTime && date.valueOf() > dataToView.endTime;}}"
													type="date" placeholder="请输入" ></DatePicker>
									</FormItem>
								</Col>
								<Col span="11">
									<FormItem label="计划完成时间：" prop="endTime" >
										<div v-if="mode === 'view'">{{this.renderViewDate(dataToView.endTime)}}</div>
										<DatePicker v-else v-model="dataToView.endTime"
													:options="{disabledDate(date) {return date && dataToView.startTime && date.valueOf() < dataToView.startTime;}}"
													type="date" placeholder="请输入" ></DatePicker>
									</FormItem>
								</Col>
							</Row>
						   <!-- <Row type="flex" justify="space-around" class="code-row-bg"
								 v-if="this.isResult !== 'greenMine' && dataToView.playImplementation=='完成创建'">
								<Col span="11" >
									<FormItem label="认定时间：" prop="identifyTime" >
										<div v-if="mode === 'view'">{{this.renderViewDate(dataToView.identifyTime)}}</div>
										<DatePicker v-else v-model="dataToView.identifyTime" type="date" placeholder="请输入"
													:options="{disabledDate(date) {return date && date.valueOf() >= new Date();}}"></DatePicker>
									</FormItem>
								</Col>
								<Col span="11" ></Col>
							</Row>-->
							<Row v-if="isResult==='greenMine'&& dataToView.createLevel !=='env-00007000000001'" type="flex"
								 justify="space-around" class="code-row-bg">
								<Col span="11"
									 v-if="dataToView.createLevel ==='env-00007000000002'||dataToView.createLevel ==='env-00007000000004'">
									<FormItem label='省级创建计划年度：' prop='proCreatePlanYear'>
										<div v-if="mode === 'view'">{{ dataToView.proCreatePlanYear }}</div>
										<!--<Input v-else class='query-form-el' placeholder="请填写省级创建计划年度" type='text' v-model='dataToView.proCreatePlanYear'></Input>-->
										<DatePicker v-else class='query-form-el' type="year" placeholder="请填写省级创建计划年度"
													v-model="dataToView.proYearDate"
													@on-change="()=>{if(dataToView.proYearDate instanceof Date){this.$set(dataToView,'proCreatePlanYear', dataToView.proYearDate.getFullYear().toString())}}"></DatePicker>
									</FormItem>
								</Col>
								<Col span="11"
									 v-if="dataToView.createLevel ==='env-00007000000003'||dataToView.createLevel ==='env-00007000000004'">
									<FormItem label='国家级创建计划年度：' prop='nationalCreatePlanYear'>
										<div v-if="mode === 'view'">{{ dataToView.nationalCreatePlanYear }}</div>
										<!--<Input v-else class='query-form-el' placeholder="请填写国家级创建计划年度" type='text' v-model='dataToView.nationalCreatePlanYear'></Input>-->
										<DatePicker v-else class='query-form-el' type="year" placeholder="请填写国家级创建计划年度"
													v-model="dataToView.nationalYearDate"
													@on-change="()=>{if(dataToView.nationalYearDate instanceof Date){this.$set(dataToView,'nationalCreatePlanYear',dataToView.nationalYearDate.getFullYear().toString())}}"></DatePicker>
									</FormItem>
								</Col>
								<Col span="11" v-if="dataToView.createLevel !=='env-00007000000004'">
								</Col>
							</Row>
							<div v-if="dataToView.createLevel ==='env-00007000000002'||dataToView.createLevel ==='env-00007000000004'">
								<Row type="flex" justify="space-around" class="code-row-bg">
									<Col span="11">
										<FormItem label='省级创建情况-所处阶段：' prop='proStage'>
											<div v-if="mode === 'view'">{{ dataToView.proStageName }}</div>
											<!--<Input v-else class='query-form-el' placeholder="请填写省级创建情况-所处阶段" type='text' v-model='dataToView.proStage'></Input>-->
											<Select v-else v-model='dataToView.proStage' placeholder="请填写省级创建情况-所处阶段"
													label-in-value class='query-form-el'>
												<Option v-for="item in dictMap.stages" :value="item.codingCodeId"
														:key="item.codingCodeId">{{item.codingName }}
												</Option>
											</Select>
										</FormItem>
									</Col>
									<Col span="11">
										<FormItem label='省级创建情况-第三方评价机构名称：' prop='proOrganName'>
											<div v-if="mode === 'view'">{{ dataToView.proOrganName }}</div>
											<Input v-else class='query-form-el' placeholder="请填写省级创建情况-第三方评价机构名称"
												   type='text'
												   v-model='dataToView.proOrganName'></Input>
										</FormItem>
									</Col>
								</Row>
								<Row type="flex" justify="space-around" class="code-row-bg">
									<Col span="11">
										<FormItem label='省级创建情况-实地抽查：' prop='proSpotCheck'>
											<div v-if="mode === 'view'">{{ dataToView.proSpotCheckName }}</div>
											<!--<Input v-else class='query-form-el' placeholder="请填写省级创建情况-实地抽查" type='text' v-model='dataToView.proSpotCheck'></Input>-->
											<Select v-else v-model='dataToView.proSpotCheck' placeholder="请填写省级创建情况-实地抽查"
													label-in-value class='query-form-el'>
												<Option v-for="item in dictMap.spotChecks" :value="item.codingCodeId"
														:key="item.codingCodeId">{{item.codingName }}
												</Option>
											</Select>
										</FormItem>
									</Col>
									<Col span="11">
										<FormItem label='省级创建情况-省级认定时间：' prop='proRecognitionTime'>
											<div v-if="mode === 'view'">{{ renderViewDate(dataToView.proRecognitionTime) }}
											</div>
											<DatePicker v-else class="query-form-el" placeholder="请选择省级创建情况-省级认定时间"
														v-model='dataToView.proRecognitionTime'
														:options="{disabledDate(date) {return date && date.valueOf() >= new Date();}}"></DatePicker>
										</FormItem>
									</Col>
								</Row>
							</div>
							<div v-if="dataToView.createLevel ==='env-00007000000003'||dataToView.createLevel ==='env-00007000000004'">
								<Row type="flex" justify="space-around" class="code-row-bg">
									<Col span="11">
										<FormItem label='国家级创建情况-所处阶段：' prop='nationalStage'>
											<div v-if="mode === 'view'">{{ dataToView.nationalStageName }}</div>
											<!--<Input v-else class='query-form-el' placeholder="请填写国家级创建情况-所处阶段" type='text' v-model='dataToView.nationalStage'></Input>-->
											<Select v-else v-model='dataToView.nationalStage' placeholder="请填写国家级创建情况-所处阶段"
													label-in-value class='query-form-el'>
												<Option v-for="item in dictMap.stages" :value="item.codingCodeId"
														:key="item.codingCodeId">{{item.codingName }}
												</Option>
											</Select>
										</FormItem>
									</Col>
									<Col span="11">
										<FormItem label='国家级创建情况-第三方评价机构名称：' prop='nationalOrganName'>
											<div v-if="mode === 'view'">{{ dataToView.nationalOrganName }}</div>
											<Input v-else class='query-form-el' placeholder="请填写国家级创建情况-第三方评价机构名称"
												   type='text'
												   v-model='dataToView.nationalOrganName'></Input>
										</FormItem>
									</Col>
								</Row>
								<Row type="flex" justify="space-around" class="code-row-bg">
									<Col span="11">
										<FormItem label='国家级创建情况-实地抽查：' prop='nationalSpotCheck'>
											<div v-if="mode === 'view'">{{ dataToView.nationalSpotCheckName }}</div>
											<!--<Input v-else class='query-form-el' placeholder="请填写国家级创建情况-实地抽查" type='text'v-model='dataToView.nationalSpotCheck'></Input>-->
											<Select v-else v-model='dataToView.nationalSpotCheck'
													placeholder="请填写国家级创建情况-实地抽查" label-in-value class='query-form-el'>
												<Option v-for="item in dictMap.spotChecks" :value="item.codingCodeId"
														:key="item.codingCodeId">{{item.codingName }}
												</Option>
											</Select>
										</FormItem>
									</Col>
									<Col span="11">
										<FormItem label='国家级创建情况-国家级认定时间：' prop='nationalRecognitionTime'>
											<div v-if="mode === 'view'">{{renderViewDate(dataToView.nationalRecognitionTime) }}
											</div>
											<DatePicker v-else class="query-form-el" placeholder="请选择国家级创建情况-国家级认定时间"
														v-model='dataToView.nationalRecognitionTime'
														:options="{disabledDate(date) {return date && date.valueOf() >= new Date();}}"></DatePicker>
										</FormItem>
									</Col>
								</Row>
							</div>
							<Row v-if="dataToView.createLevel !=='env-00007000000001'" type="flex" justify="space-around"
								 class="code-row-bg">
								<Col span="23">
									<FormItem v-if="mode === 'view'" label="认定证书或相关文件：">
										<div v-show="dataToView.idFiles.length>0"
											 v-for="(item,index) in dataToView.idFiles">
											<a @click="downloadFiles(item,index)"><span
													style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
											<Progress v-show="uploadListVisible[index]"
													  :percent="uploadListPercent[index]"></Progress>
										</div>
									</FormItem>
									<FormItem v-else label="认定证书或相关文件：" prop="idFiles">
										<div>
											<Upload ref="upload"
													:before-upload="(file) => { beforeUpload(file, 'id') }"
													:show-upload-list="true"
													:max-size="10240"
													multiple
													type="drag"
													:action="fileUrl">
												<div style="padding: 10px">
													<Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
													<p>点击将文件拖拽到这里上传</p>
													<!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
												</div>
											</Upload>
										</div>
										<div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles"
											 :key='item'>
											<a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
											<Button type="text" icon="md-trash" @click="removeFile(item.id, 'id')"
													style="margin-left: 5px;margin-bottom: 3px"/>
											<Progress v-show="uploadListVisible[index]"
													  :percent="uploadListPercent[index]"></Progress>
											<!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
										</div>
									</FormItem>
								</Col>
							</Row>
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="11">
									<FormItem label='填报人：' prop='createUserName'>
										<div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
										<Input v-else class='query-form-el' placeholder="请填写填报人" type='text'
											   readonly v-model='dataToView.createUserName'></Input>
									</FormItem>
								</Col>
								<Col span="11">
									<FormItem label='填报时间：' prop='createDate'>
										<div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
										<DatePicker v-else class="query-form-el" placeholder="请选择填报时间"
													readonly v-model='dataToView.createDate'></DatePicker>
									</FormItem>
								</Col>
							</Row>
							<Row type="flex" justify="space-around" class="code-row-bg">
								<Col span="11">
									<FormItem label='填报人手机号：' prop='registrantPhone'>
										<div v-if="mode === 'view'">{{ dataToView.registrantPhone }}</div>
										<Input v-else class='query-form-el' placeholder="请填写填报人手机号" type='text'
											   v-model='dataToView.registrantPhone'></Input>
									</FormItem>
								</Col>
								<Col span="11"></Col>
							</Row>
						</Form>
					</Col>
				</Row>
				<div slot="footer">
					<Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
					</Button>
					<Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
					<Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
				</div>
			</Modal>
        </div>
		<div v-if='modaleShow==3'>
			<Row :gutter="24" >
			  <Col span="12">
			    <Card dis-hover>
			      <div ref="echart1" :style="{height: '200px'}"></div>
			    </Card>
			  </Col>
			  <Col span="12">
			    <Card dis-hover>
			      <div ref="echart2" :style="{height: '200px'}"></div>
			    </Card>
			  </Col>
			</Row>
			<Row :gutter="24" style="margin-top: 15px">
			  <Col span="12">
			    <Card dis-hover>
			      <div ref="echart3" :style="{height: '200px'}"></div>
			    </Card>
			  </Col>
			  <Col span="12">
			    <Card dis-hover>
			      <div ref="echart4" :style="{height: '200px'}"></div>
			    </Card>
			  </Col>
			</Row>
		</div>
        
    </Layout>
</template>

<script>
	import echarts from "echarts";
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'

    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';

    export default {
        components: {
            cascaderDom
        },
        data() {
            return {
                ...this.createCommonDataField(),
                fileUrl: Api.interestedPartiesUserFile,
                columns: [
                    {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    {key: 'companyName', title: '单位名称', align: 'center', minWidth: 200,},
                    {key: 'mineName', title: '矿山名称', align: 'center', minWidth: 120,},
                    {key:'playImplementation',title: '当前创建状态',  align: 'center' , minWidth :110,name:1},
                    {key:'startTime',title: '计划开始时间',  align: 'center' , minWidth :110,render:this.renderCellDate,name:1},
                    {key:'endTime',title: '计划完成时间',  align: 'center' , minWidth :110,render:this.renderCellDate,name:1},
                    {key: 'createLevelName', title: '创建级别', align: 'center', minWidth: 120,},
                    {key: 'reasonNotCreatedName', title: '未创建原因', align: 'center', minWidth: 120,},
                    {key: 'proCreatePlanYear', title: '省级创建计划年度', align: 'center', minWidth: 120,},
                    {key: 'nationalCreatePlanYear', title: '国家级创建计划年度', align: 'center', minWidth: 120,},
                    {
                        title: '省级创建情况', align: 'center', children: [
                            {key: 'proStageName', title: '所处阶段', align: 'center', minWidth: 120,},
                            {key: 'proOrganName', title: '第三方评价机构名称', align: 'center', minWidth: 120,},
                            {key: 'proSpotCheckName', title: '实地抽查', align: 'center', minWidth: 120,},
                            {
                                key: 'proRecognitionTime', title: '省级认定时间', align: 'center', minWidth: 120,
                                render: (h, params) => {
                                    return h('span', this.renderViewDate(params.row.proRecognitionTime))
                                }
                            }]
                    },
                    {
                        title: '国家级创建情况', align: 'center', children: [
                            {key: 'nationalStageName', title: '所处阶段', align: 'center', minWidth: 120,},
                            {key: 'nationalOrganName', title: '第三方评价机构名称', align: 'center', minWidth: 120,},
                            {key: 'nationalSpotCheckName', title: '实地抽查', align: 'center', minWidth: 120,},
                            {
                                key: 'nationalRecognitionTime', title: '国家级认定时间', align: 'center', minWidth: 120,
                                render: (h, params) => {
                                    return h('span', this.renderViewDate(params.row.nationalRecognitionTime))
                                }
                            }]
                    },
                    // {key: 'createUserName', title: '填报人', align: 'center', minWidth: 120,},
                    {key: 'createDate', title: '填报时间', align: 'center', minWidth: 120, render:this.renderCellDate},
                    // {key: 'registrantPhone', title: '填报人手机号', align: 'center', minWidth: 120,},
                    // this.getActionColumns(),
                    {title: '操作', key: 'action', fixed: 'right', align: 'center', width:160,
                        render: (h, params) => {
                            if (this.modaleShow == 1 && this.isResult !== 'greenMine') {
                                return h('div', [
                                    h('A', {
                                        props: {type: 'primary', size: 'small'},
                                        style: {fontSize: '14px',},
                                        on: {
                                            click: () => {
                                                this.viewData(params);
                                            }
                                        }
                                    }, '详情')
                                ])
                            } else {
                                if (params.row.playImplementation!=='完成创建'&&(this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId  || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined||this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined)) {
                                    return h('div', [
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px',},
                                            on: {
                                                click: () => {
                                                    this.viewData(params);
                                                }
                                            }
                                        }, '详情'),
                                        h('Divider', {props: {type: 'vertical'}}, ''),
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            disabled: true,
                                            style: {fontSize: '14px'},
                                            on: {
                                                click: () => {
                                                    this.editData(params);
                                                }
                                            }
                                        }, '修改'),
                                        h('Divider', {props: {type: 'vertical'}}, ''),
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px', color: 'red'},
                                            on: {
                                                click: () => {
                                                    this.deleteData(params);
                                                }
                                            }
                                        }, '删除')
                                    ]);
                                } else {
                                    return h('div', [
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px',},
                                            on: {
                                                click: () => {
                                                    this.viewData(params);
                                                }
                                            }
                                        }, '详情'),
                                        h('Divider', {props: {type: 'vertical'}}, ''),
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px', color: '#c5c8ce'}
                                        }, '修改'),
                                        h('Divider', {props: {type: 'vertical'}}, ''),
                                        h('A', {
                                            props: {type: 'primary', size: 'small'},
                                            style: {fontSize: '14px', color: '#c5c8ce'}
                                        }, '删除')
                                    ]);
                                }
                            }
                        }}
                ],
                ruleCustom: {
                    companyId: [{required: true, message: '请填写单位名称', trigger: 'change',}],
                    mineName: [{
                        validator: (rule, value, callback) => {
                            if (this.isResult === 'greenMine' && !value) {
                                callback('请填写矿山名称');
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    createLevel: [{required: true, message: '请填写创建级别', trigger: 'change',}],
                    reasonNotCreated: [{required: true, message: '请填写未创建原因', trigger: 'change',}],
                    proCreatePlanYear: [{
                        validator: (rule, value, callback) => {
                            if (this.isResult === 'greenMine' && !value) {
                                callback('请填写省级创建计划年度');
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    nationalCreatePlanYear: [{
                        validator: (rule, value, callback) => {
                            if (this.isResult === 'greenMine' && !value) {
                                callback('请填写国家级创建计划年度');
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    proStage: [{required: true, message: '请填写省级创建情况-所处阶段', trigger: 'change',}],
                    proOrganName: [{required: true, message: '请填写省级创建情况-第三方评价机构名称', trigger: 'change',}],
                    proSpotCheck: [{required: true, message: '请填写省级创建情况-实地抽查', trigger: 'change',}],
                    // proRecognitionTime: [{ required: true, message: '请填写省级创建情况-省级认定时间', trigger: 'change', type: 'date' }],
                    nationalStage: [{required: true, message: '请填写国家级创建情况-所处阶段', trigger: 'change',}],
                    nationalOrganName: [{required: true, message: '请填写国家级创建情况-第三方评价机构名称', trigger: 'change',}],
                    nationalSpotCheck: [{required: true, message: '请填写国家级创建情况-实地抽查', trigger: 'change',}],
                    // nationalRecognitionTime: [{required: true,message: '请填写国家级创建情况-国家级认定时间',trigger: 'change',type: 'date'}],
                    createUserName: [{required: true, message: '请填写填报人', trigger: 'change',}],
                    createDate: [{required: true, message: '请填写填报时间', trigger: 'change', type: 'date'}],
                    registrantPhone: [{
                        validator: (rule, value, callback) => {
                            if (!(/^1[3456789]\d{9}$/.test(this.dataToView.registrantPhone))) {
                                callback(' ');
                                // this.$Message.error("请填写有效的的手机号")
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                    idFiles: [{
                        validator: (rule, value, callback) => {
                            if (this.dataToView.idFiles.length < 1) {
                                callback('附件必须上传')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    playImplementation: [ { required: true, message: '请选择当前创建状态', trigger: 'change', } ],
                    startTime: [{required: true, message: '请选择计划开始时间', trigger: 'blur' ,type: 'date'}],
                    endTime: [{required: true, message: '请选择计划完成时间', trigger: 'blur' ,type: 'date'}],
                    identifyTime: [{required: true, message: '请选择认定时间', trigger: 'blur' ,type: 'date'}],
                },
                tableHeight: 10,
                dictMap: {},
                punishment: false,
                penaltyAmount: true,
                // api
                queryUrl: Api.queryEnTable.replace('{{table}}', 'GreenFactoryConstructionRegist'),
                exportUrl: Api.exportEnTable.replace('{{table}}', 'GreenFactoryConstructionRegist'),
                deleteUrl: Api.deleteEnTable.replace('{{table}}', 'GreenFactoryConstructionRegist'),
                getUrl: Api.getEnTable.replace('{{table}}', 'GreenFactoryConstructionRegist'),
                updateUrl: Api.updateEnTable.replace('{{table}}', 'GreenFactoryConstructionRegist'),
                saveUrl: Api.saveEnTable.replace('{{table}}', 'GreenFactoryConstructionRegist'),
                modaleShow:1,
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),
                // options: {
                //     disabledDate (date) {
                //         return date && date.valueOf() >= new Date();
                //     }
                // },
            }
        },
        computed: {
            isResult() {
                return this.$route.name
            },
            titleName(){
                let name ='';
                switch (this.isResult){
                    case 'greenMine':
                       name = '绿色矿山';
                       break;
                    case 'greenFactory':
                        name = '绿色工厂';
                        break;
                    case 'greenPark':
                        name = '绿色园区';
                        break;
                    case 'greenSupplyChain':
                        name = '绿色供应链';
                        break;
                }
                return name;
            },
            columns1() {
                const columns = [...this.columns];
                const columns1 = []
                columns.forEach(item => {
                    if (this.isResult === 'greenMine') {
                        if (item.name != 1) {
                            columns1.push(item)
                        }
                    } else {
                        if (item.key !== 'mineName' && item.key !== 'proCreatePlanYear' && item.key !== 'nationalCreatePlanYear') {
                            columns1.push(item)
                        }
                    }
                })
                return columns1
            },
        },
        async mounted() {
            this.setTableHeight();
            await this.$http.get(Api.queryDictBycode + "env-00007,env-00008,env-00009,env-00010", {}).then((res) => {
                // 数据字典 list 转 map，方便调用
                this.dictMap = {
                    'createLevels': this.dictListToMap(res.data.data['env-00007']),
                    'reasonNotCreateds': this.dictListToMap(res.data.data['env-00008']),
                    'stages': this.dictListToMap(res.data.data['env-00009']),
                    'spotChecks': this.dictListToMap(res.data.data['env-00010'])
                }
            })
            this.reset1()
        },
        methods: {
            ...pageCommonFunction,
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                this.dataToQuery.type = this.isResult
                // if(this.dataToQuery.eventTypeIdsArrays) {
                //     this.dataToQuery.eventTypeIds = this.arrayToInFormat(this.dataToQuery.eventTypeIdsArrays)
                // }
                // this.dataToQuery.orgId = this.currentUser.companyId;
                this.queryAjax();
            },
            createLevelChange(value) {
                if (value.value === 'env-00007000000001') {
                    this.dataToView.proYearDate = null
                    this.dataToView.proCreatePlanYear = null
                    this.dataToView.nationalYearDate = null
                    this.dataToView.nationalCreatePlanYear = null
                    this.dataToView.proStage = null
                    this.dataToView.proOrganName = null
                    this.dataToView.proSpotCheck = null
                    this.dataToView.proRecognitionTime = null
                    this.dataToView.nationalStage = null
                    this.dataToView.nationalOrganName = null
                    this.dataToView.nationalSpotCheck = null
                    this.dataToView.nationalRecognitionTime = null
                } else {
                    this.dataToView.reasonNotCreated = null
                    if (value.value === 'env-00007000000002') {
                        this.dataToView.nationalYearDate = null
                        this.dataToView.nationalCreatePlanYear = null
                        this.dataToView.nationalStage = null
                        this.dataToView.nationalOrganName = null
                        this.dataToView.nationalSpotCheck = null
                        this.dataToView.nationalRecognitionTime = null
                    } else if (value.value === 'env-00007000000003') {
                        this.dataToView.proYearDate = null
                        this.dataToView.proCreatePlanYear = null
                        this.dataToView.proStage = null
                        this.dataToView.proOrganName = null
                        this.dataToView.proSpotCheck = null
                        this.dataToView.proRecognitionTime = null
                    }
                }
            },
            submit(name) {
                if (this.dataToView.nationalYearDate) {
                    this.dataToView.nationalCreatePlanYear = this.dataToView.nationalYearDate.getFullYear();
                }
                if (this.dataToView.proYearDate) {
                    this.dataToView.proCreatePlanYear = this.dataToView.proYearDate.getFullYear();
                }
                this.dataToView.tableType = this.isResult
                this.submitAjax(name);
            },
            createEmptyDataToAdd() {
                return {
                    createDate: new Date(),
                    createUserId: this.currentUser.userId,
                    createUserName: this.currentUser.userName,
                    createLevel: 'env-00007000000004',
                    id: this.get_uuid(),
                    idFiles: [],
                }
            },
            async beforeEditDialogOpen(data) {
                data.row.nationalYearDate = new Date(data.row.nationalCreatePlanYear + '-01-01');
                data.row.proYearDate = new Date(data.row.proCreatePlanYear + '-01-01');
            },
            async afterDataToViewInit() {
                await this.getFiles('id');
            },
            reset1(){
				this.dataToQuery = {};
				if (this.$refs.queryOrgCascader) {
				    this.$refs.queryOrgCascader.resetCurrentOrg();
				}
				this.pagedata.currentPage=1
                this.lowerStep(this.modaleShow)
            },
            lowerStep(name) {
			    this.modaleShow = name
				this.dataToQuery.modaleShow = name
				if (name == 3) {
					this.$nextTick(function () {
					    this.queryStatis();
					})
					
				} else {
					if (name == 1 && this.isResult !== 'greenMine') {
					    this.dataToQuery.playImplementation ='完成创建'
					}else{
					    delete this.dataToQuery['playImplementation']
					}
					this.query();
				}
            },
			queryStatis() {
			    this.pageStatus.loading = true
			    let container1 = echarts.init(this.$refs.echart1);
			    let container2 = echarts.init(this.$refs.echart2);
				let container3 = echarts.init(this.$refs.echart3);
				let container4 = echarts.init(this.$refs.echart4);
			    container1.showLoading({
			      text : '正在加载数据'
			    });
				container2.showLoading({
				  text : '正在加载数据'
				});
				container3.showLoading({
				  text : '正在加载数据'
				});
				container4.showLoading({
				  text : '正在加载数据'
				});
			    this.$http.post(this.queryUrl+'/statistics', this.dataToQuery).then((res) => {
					if (res.data.status === 201) {
			            this.$Message.error(res.data.msg);
			        }
			        if (res.data.status === 200) {
			            this.pageStatus.loading = false
			            let dataMap = res.data.data;
						
			            let option1 = this.getOption(dataMap.level,'创建级别分布');
						container1.hideLoading();
			            container1.setOption(option1);
			            window.onresize = container1.resize;
			
			            let option2 = this.getOption(dataMap.implementation,'计划创建家数');
						container2.hideLoading();
			            container2.setOption(option2);
						// container2.on('click', (param)=> {
							// this.modelVisible = true
						 //    event.stopPropagation()// 阻止冒泡
						 //    this.echartsName = param.name;
						 //    this.queryModel()
						// });
			            window.onresize = container2.resize;
						
						let option3 = this.getOption(dataMap.proStage,'省级创建所处阶段');
						container3.hideLoading();
						container3.setOption(option3);
						window.onresize = container3.resize;
						
						let option4 = this.getOption(dataMap.nationalStage,'国家级创建所处阶段');
						container4.hideLoading();
						container4.setOption(option4);
						window.onresize = container4.resize;
			        }
			    }).catch(e => {
			        this.$Message.error("数据获取失败")
			        this.pageStatus.loading = false
			    })
			},
			getOption(data,titleName) {
				return {
					title: {
						text: titleName,
						textStyle: {
							fontSize: 14,
						},
						left: 'center'
					},
					tooltip: {
						show: true,
					},
					legend: {
						icon: "circle",
						orient: 'vertical',
						right: '15%',
						y: "center",
						type: 'scroll',
						itemHeight: 18,
						tooltip: {
							show: true
						},
						formatter: function (name) {
							let total = 0;
							let target;
							for (let i = 0; i < data.length; i++) {
								total += data[i].value;
								if (data[i].name == name) {
									target = data[i].value;
								}
							}
							if (!target) {
								target = 0;
							}
							let percentage = 0
							if (total) {
		
								percentage = ((target / total) * 100).toFixed(2) + '%';
							}
		
							return name + '  ' + target + '  ' + percentage;
						},
					},
					color: ['#42A5F5', '#4CD1A8', '#FFC310', '#FD5C50'],
					series: [
						{
							// name: titleName,
							type: 'pie',
							radius: ['40%', '70%'],
							center: ["25%", "50%"],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 10,
								borderColor: '#fff',
								borderWidth: 8,
							},
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: false,
								}
							},
							labelLine: {
								show: false
							},
							data:data
						}
					]
				};
			},
        },
        watch: {
            '$route.name': function () {
				this.modaleShow = 1
				this.reset1()
				if (this.$refs.table) {
					this.setTableHeight()
				}
            }
        },
    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }

</style>
